<template>
  <div class="searchPopup">
    <div class="header">
      <span @click="$emit('set:Show',false)"></span>
      <p>筛选</p>
    </div>
    <div class="main">
      <searchPopupList
        :option="{name: '分类', icon: true, dataArr: classification, title:'catg_level_no_2L'}"
        v-model="form[0]"
      ></searchPopupList>
      <searchPopupList
        :option="{name: '品牌', dataArr: brand, Checkbox: true, title: 'seo_en_brand_name'}"
        :proxy="storage"
        v-model="form[1]"
      >
        <div class="moreTo" @click="show = true">全部品牌></div>
        <van-popup v-model="show" :style="{ height: '100%',width:'100%' }" position="right">
          <searchPopupSon @set:Show="show = false" :proxy="storage" :dataArr="brand"></searchPopupSon>
        </van-popup>
      </searchPopupList>
      <searchPopupList
        :option="{name: '性别', dataArr: gender, Checkbox: true , title:'prop_value_no_04Y'}"
        v-model="form[2]"
      ></searchPopupList>
      <searchPopupList
        :option="{name: '价格', icon: true, dataArr: price, Checkbox: true, mode: 'display', title:'price_group'}"
        v-model="form[3]"
      ></searchPopupList>
      <searchPopupList
        :option="{name: '尺码', icon: true, dataArr: size, Checkbox: true, mode: 'display', title:'size_list'}"
        v-model="form[4]"
      ></searchPopupList>
      <searchPopupList
        :option="{name: '颜色', icon: true, dataArr: colour, Checkbox: true, mode: 'display', title:'prop_value_no_00T'}"
        v-model="form[5]"
      ></searchPopupList>
    </div>
    <div class="footer">
      <em @click="setRouter">确定</em>
    </div>
  </div>
</template>

<script>
import searchPopupList from "@/components/list/searchPopupList.vue";
import searchPopupSon from "@/components/popup/searchPopupSon.vue";
import listData from "@/assets/js/searchPopupListData.js";

export default {
  name: "searchPopup",
  inject: ["reload"],
  data() {
    return {
      ...listData,
      show: false,
      storage: {
        Checkbox: [],
        CheckboxName: [],
        CheckboxTitle: []
      },
      form: []
    };
  },
  components: {
    searchPopupList,
    searchPopupSon
  },
  methods: {
    setRouter() {
      this.$router.push({
        path: "/ProductList",
        query: {
          ...this.$route.query,
          filterJson: this.form.filter(s => s && s.trim()).join(","),
        }
      });
      this.reload();
    }
  }
};
</script>
<style scoped>
.searchPopup {
  height: 100%;
}
.searchPopup .header {
  height: 1rem;
  margin: 0px;
  width: 100%;
  line-height: 1.02rem;
  text-align: center;
  font-size: 0.36rem;
  color: #333;
  background: #fff;
  border-bottom: 0.02rem solid #eee;
  position: relative;
}

.main {
  height: calc(100% - 1rem);
  overflow-y: auto;
}

.searchPopup .header span {
  line-height: 1rem;
  float: left;
  padding-left: 0.24rem;
  width: 10%;
  height: 1rem;
  background: url(//i1.ygimg.cn/pics/mobile/appointment/searchP/return.png)
    center center no-repeat;
  background-size: 0.2rem 0.4rem;
  box-sizing: content-box;
}

.searchPopup .header p {
  text-align: center;
  margin-right: 12%;
  display: inline-block;
}

.moreTo {
  display: block;
  border-color: rgba(0, 0, 0, 0);
  padding: 0;
  color: #a0a0a0;
  width: 30%;
  line-height: 0.52rem;
  position: absolute;
  bottom: 0rem;
  height: 0.52rem;
  right: 0.2rem;
  background: #fff;
  text-align: center;
  font-size: 0.28rem;
}

.footer {
  line-height: 1rem;
  text-align: center;
  font-size: 0.32rem;
  color: #fff;
  position: fixed;
  bottom: -0.02rem;
  left: 0;
  width: 100%;
  z-index: 99;
}

.footer em {
  width: 50%;
  display: inline-block;
  font-style: normal;
  background: #ff0000;
}
</style>